<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="vuex.js"></script>	
<div id="app">
	{{count}}
</div>
<script>
	const store = new Vuex.Store({
		state : {
			count : 0,
		},
		mutations : {
			increment : function(state){
				state.count++;
				console.log(state.count);
			}
		},
		actions : {
			increment(context){
				console.log(context);
				context.commit('increment');
			}
		}
	});
	const Counter = {
		template : `<div>
			<button @click='increment'>+{{this.$store.state.count}}</button>
		</div>`,
		methods : {
			increment(){
				store.commit('increment');
			}
		}
	}
	/**
	 * [vm description]
	 * @type {Vue}
	 * Action 函数接受一个与 store 实例具有相同方法和属性的 context 
	 * 对象，因此你可以调用 context.commit 提交一个 
	 * mutation，或者通过 context.state 和 context.getters 来获取 
	 * state 和 getters。当我们在之后介绍到 Modules 时，你就知道 
	 * context 对象为什么不是 store 实例本身了
	 */
	var vm = new Vue({
		el : '#app',
		store,
		data : {
			count : store.state.count,
		},

		template : `<div><p>{{this.$store.state.count}}</p><counter></counter></div>`,
		components : {Counter},
	})
</script>	
</body>
</html>